Code Playground

@import url('https://fonts.googleapis.com/css?family=Roboto');
 * {
	 box-sizing: border-box;
}
 body {
	 height: 100%;
	 background-color: #7656d6;
	 color: #333;
	 font-family: 'Roboto', sans-serif;
	 text-align: center;
	 letter-spacing: 0.15em;
	 font-size: 22px;
}
 .slider {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 width: 400px;
	 height: 300px;
	 box-shadow: 3px 3px 10px rgba(0, 0, 0, .2);
}
 .wrapper {
	 overflow: hidden;
	 position: relative;
	 width: 400px;
	 height: 300px;
	 z-index: 1;
}
 .slides {
	 display: flex;
	 position: relative;
	 top: 0;
	 left: -400px;
	 width: 10000px;
}
 .slides.shifting {
	 transition: left 0.2s ease-out;
}
 .slide {
	 width: 400px;
	 height: 300px;
	 cursor: pointer;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 transition: all 1s;
	 position: relative;
	 background: #ffcf47;
	 border-radius: 2px;
}
 .slider.loaded .slide:nth-child(2), .slider.loaded .slide:nth-child(7) {
	 background: #ffcf47;
}
 .slider.loaded .slide:nth-child(1), .slider.loaded .slide:nth-child(6) {
	 background: #7adcef;
}
 .slider.loaded .slide:nth-child(3) {
	 background: #3cff96;
}
 .slider.loaded .slide:nth-child(4) {
	 background: #a78df5;
}
 .slider.loaded .slide:nth-child(5) {
	 background: #ff8686;
}
 .control {
	 position: absolute;
	 top: 50%;
	 width: 50px;
	 height: 50px;
	 background: #fff;
	 border-radius: 50px;
	 margin-top: -20px;
	 box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
	 z-index: 2;
}
 .prev, .next {
	 background-size: 22px;
	 background-position: center;
	 background-repeat: no-repeat;
	 cursor: pointer;
}
 .prev {
	 background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
	 left: -20px;
}
 .next {
	 background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
	 right: -20px;
}
 .prev:active, .next:active {
	 transform: scale(0.8);
}

var slider = document.getElementById('slider'),
    sliderItems = document.getElementById('slides'),
    prev = document.getElementById('prev'),
    next = document.getElementById('next');

if (dir == 1) {
        items.style.left = (posInitial - slideSize) + "px";
        index++;      
      } else if (dir == -1) {
        items.style.left = (posInitial + slideSize) + "px";
        index--;      
      }
    };
    
    allowShift = false;
  }
    
  function checkIndex (){
    items.classList.remove('shifting');

if (index == -1) {
      items.style.left = -(slidesLength * slideSize) + "px";
      index = slidesLength - 1;
    }

if (index == slidesLength) {
      items.style.left = -(1 * slideSize) + "px";
      index = 0;
    }
    
    allowShift = true;
  }
}

slide(slider, sliderItems, prev, next);

Frontend Forever App